<template>
  <el-dialog
    class="record-main"
    :visible.sync="isShow"
    :before-close="handleCancelModal"
    :close-on-click-modal="false"
    width="800px"
  >
    <span slot="title">标品投标详情</span>
    <div v-loading="load">
      <el-table
        class="table-box color-block"
        :data="listData"
        :border="true"
        :stripe="true"
        :empty-text="load ? '正在加载数据' : null"
      >
        <el-table-column prop="index" label="投标次数" width="180" />
        <el-table-column prop="created_at" label="投标时间" min-width="180" />
        <el-table-column prop="price" label="投标价格" min-width="180" />
      </el-table>
      <paginate
        :total="searchParams.total"
        :per-page="searchParams.per_page"
        :page="searchParams.page"
        @paginate-change="handleSearch"
      />
    </div>
  </el-dialog>
</template>

<script>
import Paginate from '@/components/Paginate/index'
import { getBidGoodsPaginate } from '@/api/bid'

export default {
  name: 'BidDetail',
  components: { Paginate },
  props: {
    'isShow': { type: Boolean, default: true },
    'searchData': { type: Object, default: null }
  },
  data: function() {
    return {
      load: true,
      isSubmit: false,
      listData: [],
      searchParams: {
        bid_id: null,
        goods_id: null,
        user_id: null,
        total: null,
        page: null,
        per_page: 10
      }
    }
  },
  mounted: function() {
    this.searchParams.bid_id = this.searchData.bid_id
    this.searchParams.goods_id = this.searchData.goods_id
    this.searchParams.user_id = this.searchData.user_id
    // 初始化方法
    this.initialize()
  },
  methods: {
    // 初始化数据列表
    initialize: function() {
      this.load = true
      getBidGoodsPaginate(this.searchParams)
        .then(res => {
          const length = res.data.length
          this.listData = res.data.map((e, index) => {
            console.log(e)
            return {
              created_at: e.created_at,
              price: e.price,
              index: length - index
            }
          })
          this.searchParams.total = Number(res.total)
          this.searchParams.page = Number(res.current_page)
          this.searchParams.per_page = Number(res.per_page)
          this.$nextTick(function() {
            this.load = false
          })
        })
    },
    // 根据条件筛选数据
    handleSearch: function(value, field) {
      // 重置表单数据
      if (field === 'reset') {
        this.searchParams.page = 1
        this.$refs[value].resetFields()
        // 页码参数变更
      } else if (field) {
        this.searchParams.page = 1
        this.searchParams[field] = value
      }
      this.initialize()
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      if (!this.isSubmit) {
        this.$emit('on-cancel-modal', 'showDetail', refresh)
      }
    }
  }
}
</script>

<style lang="scss">
.record-main .el-dialog__body {
  padding-top: 2px !important;
  padding-left: 20px !important;
}
.record-main {
  display: flex;
  margin-top: 10px;
  flex-flow: column nowrap;
  padding: 15px 15px 5px 15px;

  .table-button {
    flex-grow: 0;
    .el-button--mini {
      padding: 5px 13px !important;
      margin-bottom: 6px;
    }
  }

  th {
    padding: 0;
    height: 40px;
    line-height: 40px;
    background-color: #f2f2f2;
  }
  td {
    padding: 0;
    height: 38px;
    line-height: 38px;
  }

  .paginate-main {
    flex-grow: 0;
  }
}
</style>
